<template>
	<view>
		<view class="form">
			<view class="item">
				<view class="item-left">头像</view>
				<view class="item-right">
					<view class="avatar">
						<open-data type="userAvatarUrl"></open-data>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="item-left">昵称</view>
				<view class="item-right">
					<view class="nickname">
						<open-data type="userNickName"></open-data>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="item-left">姓名</view>
				<view class="item-right">
					<input type="text" v-model="formData.surname" placeholder-class="pla" placeholder="请填写真实姓名"/>
				</view>
			</view>
			<button class="item" size="mini" hover-class="none" open-type="getPhoneNumber" @getphonenumber="bindGetPhoneTap">
				<view class="item-left">电话</view>
				<view class="item-right">
						<text class="mobile" v-if="formData.telephone.length">{{formData.telephone}}</text>
					<text class="pla" v-else>获取手机号</text>
				</view>
			</button>
			<view class="item">
				<view class="item-left">性别</view>
				<view class="item-right">
					<view class="item-sex" @click="formData.gender = 1">
						<view class="item-sex-label">
							<view class="item-sex-label-xz" v-if="formData.gender == 1"></view>
						</view>
						<view class="item-sex-name">
							<text>男</text>
						</view>
					</view>
					<view class="item-sex" @click="formData.gender = 2">
						<view class="item-sex-label">
							<view class="item-sex-label-xz" v-if="formData.gender == 2"></view>
						</view>
						<view class="item-sex-name">
							<text>女</text>
						</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="item-left">邮箱</view>
				<view class="item-right">
					<input type="text" v-model="formData.email" placeholder-class="pla" placeholder="请填写邮箱地址"/>
				</view>
			</view>
		</view>
		<view class="submit" @click="submitApi">保存</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				code: '',
				formData: {
					surname: '',
					telephone: '',
					gender: 1,
					email: ''
				}
			};
		},
		async onLoad() {
			// await this.getInfoApi();
			// await this.pullCode();
		},
		methods:{
			selectGender(gender){
				this.formData.gender = gender;
			},
			async pullCode() {
			    let res = await new Promise(resolve => {
			        uni.login({
			            provider: 'weixin',
			            success: function (res) {
			                resolve(res);
			            },
			            fail() {
			                uni.showToast({ title: '系统错误', icon: 'none'});
			            }
			        });
			    });
			    if (res.code) this.code = res.code;
			},
			async getInfoApi(){
				let response = await this.http({
					url: 'user/info',
				});
				if(response.status !== 0) return ;
				this.formData = response.result;
			},
			async submitApi(){
				let response = await this.http({
					url: 'user/edit',
					method: 'post',
					data: this.formData
				});
				if(response.status !== 0) return ;
				uni.showToast({title: '提交成功',icon: 'none'});
				setTimeout(() => {
					uni.navigateBack();
				} , 2000);
			},
			// 获取手机号
			async bindGetPhoneTap(event){
				let exchangeInfo = event.mp.detail;
				if(!exchangeInfo.encryptedData){
					uni.showToast({title : '权限不足',icon: 'none'});
					return false;
				}
				exchangeInfo.code = this.code;
				let respsone = await this.http({
					url: 'login/telephone',
					method: 'post',
					data: exchangeInfo
				})
				if (respsone.status !== 0) {
					uni.showToast({title: respsone.msg || '系统错误',icon: 'none'});
					this.pullCode();
					return false;
				}
				uni.showToast({
				    title: '获取手机号成功',
				    icon: 'none'
				});
			},
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f5f5f5;
}
 button{
	 outline: none;
	 background: transparent;
	 &::after{border:none;}
 }
.form{
	margin: 50rpx 30rpx;
	background-color: #FFFFFF;
	border-radius: 20rpx;
	box-shadow: 0 0 10rpx #C0C0C0;
	padding: 0 30rpx;
	.item{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
		&::last-child{
			border: 0;
		}
		.item-left{
			color: #333333;
			font-size: 28rpx;
		}
		.item-right{
			display: flex;
			justify-content: flex-end;
			align-items: center;
			.item-sex{
				display: flex;
				justify-content: flex-end;
				align-items: center;
				margin-left: 15rpx;
				.item-sex-label{
					width: 36rpx;
					height: 36rpx;
					border: 2rpx solid #17abe3;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					margin-right: 15rpx;
					.item-sex-label-xz{
						width: 24rpx;
						height: 24rpx;
						background-color: #17abe3;
						border-radius: 50%;
					}
				}
				.item-sex-name{
					font-size: 28rpx;
				}
			}
			.avatar{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				overflow: hidden;
			}
			.nickname{
				color: #17abe3;
				font-size: 28rpx;
			}
			input{
				color: #17abe3;
				font-size: 28rpx;
				text-align: right;
			}
			.pla{
				color: #999999;
			}
			.mobile{
				color: #17abe3;
			}
		
		}
	}
}
.submit{
		margin: 100rpx 30rpx 0 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 80rpx;
		background-color: #17abe3;
		text-align: center;
		font-size: 30rpx;
		color: #FFFFFF;
	}
</style>
